<template>
  <div id="companyTax">
    <div class="header">
      <div class="month">
        <span>税款所属期:</span>
        <el-date-picker v-model="query.month" type="month" :clearable="false" :editable="false" placeholder="选择月"> </el-date-picker>
      </div>
      <div class="Query">
        <div class="left">
          <el-form class="form">
            <el-form-item>
              <el-input v-model="query.companyName" placeholder="公司名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="query.name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-form>
          <el-popover placement="bottom" width="1000" trigger="click">
            <el-form class="form">
              <el-form-item>
                <el-select v-model="query.type" placeholder="请选择所属大类">
                  <el-option value="综合所得申报">综合所得申报</el-option>
                  <el-option value="非居民所得申报">非居民所得申报</el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="query.project" placeholder="请选择所属项目">
                  <el-option value="工资薪金申报">工资薪金申报</el-option>
                  <el-option value="全年一次性奖金收入">全年一次性奖金收入</el-option>
                  <el-option value="劳务报酬（一般、法律援助补贴、其他非连续劳务）">劳务报酬（一般、法律援助补贴、其他非连续劳务）</el-option>
                  <el-option value="劳务报酬（保险营销员、证券经纪人、其他连续劳务）">劳务报酬（保险营销员、证券经纪人、其他连续劳务）</el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button slot="reference">更多</el-button>
          </el-popover>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="right">
          <el-button type="default">导出</el-button>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="汇总" name="1"><Summary :query="query" /> </el-tab-pane>
      <el-tab-pane label="综合所得申报表" name="2"><comprehensiveTax :query="query"/></el-tab-pane>
      <el-tab-pane label="分类所得申报表" name="3"> <classificationTax :query="query"/></el-tab-pane>
      <el-tab-pane label="非居民所得申报表" name="4"> <peopleTaxDetail :query="query"/></el-tab-pane>
      <el-tab-pane label="限售股所得申报表" name="5"> <restrictedSharesTax :query="query"/></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Summary from "./tables/summary.vue";
import comprehensiveTax from "./tables/comprehensiveTax.vue";
import classificationTax from "./tables/classificationTax.vue";
import peopleTaxDetail from "./tables/nonResidentsTax.vue";
import restrictedSharesTax from "./tables/restrictedSharesTax.vue";

export default {
  name: "companyTax",
  components: {
    Summary,
    comprehensiveTax,
    classificationTax,
    peopleTaxDetail,
    restrictedSharesTax
  },
  created() {
    var date = new Date();
    var month = date.getFullYear() + "-" + (date.getMonth() > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1));
    this.query.month = month;
  },
  data() {
    return {
      activeName: "1",
      query: { month: "", keyWord: "", type: "", project: "", status: "" }
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
#companyTax {
  padding: 20px;
  .header {
    margin-top: 5px;
    .month {
      font-weight: 900;
      .el-date-editor {
        :deep(.el-input__inner) {
          border-bottom: 0 !important;
          font-size: 19px;
          font-weight: 600;
        }
      }
    }
    .Query {
      margin-top: 15px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .form {
          display: inline-flex;
          .el-form-item {
            margin-right: 8px;
            .el-date-editor {
              border-top: 0 !important;
              border-right: 0 !important;
              border-left: 0 !important;
            }
          }
        }
      }
    }
  }
  .content {
    .declare {
      color: #31a2f2;
      cursor: pointer;
    }
  }
}
.el-popover {
  .form {
    padding: 10px 50px 10px 20px;
    display: flex;
    .el-form-item {
      margin-right: 8px;
      margin-top: 18px;
    }
  }
}
</style>
